<template>
	<view class="order-list">
		<view class="order-item">
			<!-- 顶部店铺名 -->
			<view class="order-top-info">
				<text class="top-title">{{ order.merchantsname }}</text>
				<text class="order-time">时间:{{ order.time.split('.')[0].replace('T', ' ') }}</text>
			</view>
			<!-- 中部订单商品信息 -->
			<view class="goods-base-info" @click="gotoOrderDetail">
				<image :src="order.goodsimg" mode="heightFix"></image>
				<text class="goods-name">{{ order.goodsname }}</text>
				<view class="price-num">
					<text class="price">&yen;{{ order.price.toFixed(2) }}</text>
					<text class="num">共{{ order.count }}件</text>
				</view>
			</view>
			<!-- 底部订单附加信息 -->
			<view class="order-other-info">
				<text>分类:{{ order.choicename }}</text>
				<text>合计:&yen;<text class="price">{{ (order.count * order.price).toFixed(2) }}</text></text>
			</view>
			<view class="btn-group">
				<slot name="btn"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"shop-order",
		props: {
			order: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			// 当单项订单大致信息被点击后跳转至订单详情页
			gotoOrderDetail() {
				uni.navigateTo({
					url: `/subpages/orderdetail/orderdetail?orderid=${ this.order.orderid }&gid=${ this.order.goodsid }&gimg=${ this.order.goodsimg }&gname=${ this.order.goodsname }&gprice=${ this.order.goodsbaseprice }&mname=${ this.order.merchantsname }`
				})
			}
		}
	}
</script>

<style>
	.order-list {
		margin-top: 20rpx;
	}
	
	.order-item {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		margin-top: 10rpx;
		background-color: #fff;
		border-radius: 15rpx;
		border-bottom: 1px solid #aaa;
	}
	
	.order-item:last-child {
		border-bottom: 0;
	}
	
	.goods-base-info {
		height: 200rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.goods-base-info image {
		width: 200rpx;
		height: 200rpx;
	}
	
	.goods-name {
		width: 50%;
		font-size: 13px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.price-num {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}
	
	.order-top-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx;
	}
	
	.top-title {
		font-weight: 600;
	}
	
	.order-time {
		color: gray;
		font-size: 12px;
	}
	
	.order-other-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		font-size: 14px;
	}
	
	.order-other-info text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.order-other-info text:nth-child(2) {
		width: 35%;
	}
	
	.price {
		color: red;
		font-size: 16px;
	}
	
	.btn-group {
		display: flex;
		justify-content: flex-end;
	}

</style>